<template>
  <div>
    <el-table
      :data="domainNameList"
      style="width: 100%;"
    >
      <el-table-column :label="$t('domainName')" >
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.domainName"
          />
        </template>
      </el-table-column>
      <el-table-column >
        <template slot="header">
          <el-button type="primary" icon="el-icon-plus" style="float: right" @click="addDomainName" />
        </template>
        <template slot-scope="scope">
          <el-button
            type="primary"
            @click="open(scope.row.domainName)"
          >{{ $t('jump') }}
          </el-button>
          <el-button
            type="primary"
            @click="updateDomainName(scope.row)"
          >{{ $t('save') }}
          </el-button>
          <el-button
            v-if="!scope.row.isAdd"
            type="danger"
            @click="deleteDomainName(scope.row)"
          >{{ $t('delete') }}
          </el-button>
          <el-button
            type="primary"
            @click="changeDomainNameStatus(scope.row)"
            v-text="scope.row.status==1?$t('stop'):$t('enable')"
          />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {
  listCompanyDomainName,
  deleteCompanyDomainName,
  updateCompanyDomainName,
  insertCompanyDomainName
} from '@/api/auth/authCompanyDomainNameApi'
import { successNotice } from '@/util/common'
export default {
  name: 'DomainName',
  props: {
    companyId: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      domainNameList: []
    }
  }, created() {
    this.listCompanyDomainName()
  }, methods: {
    open(url) {
      window.open('http://' + url)
    },
    changeDomainNameStatus(item) {
      updateCompanyDomainName(item).then(res => {
        const { code } = res
        if (code === '200') {
          successNotice(this)
        }
        this.listCompanyDomainName()
      })
    },
    updateDomainName(item) {
      if (item.isAdd) {
        insertCompanyDomainName(item).then(res => {
          const { code } = res
          if (code === '200') {
            successNotice(this)
          }
          this.listCompanyDomainName()
        })
      } else {
        updateCompanyDomainName(item).then(res => {
          const { code } = res
          if (code === '200') {
            successNotice(this)
          }
          this.listCompanyDomainName()
        })
      }
    },
    deleteDomainName(item) {
      const that = this
      this.$confirm(this.$t('delete'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      })
        .then(function() {
          deleteCompanyDomainName({
            domainNameId: item.domainNameId
          }).then(res => {
            const { code } = res
            if (code === '200') {
              successNotice(that)
            }
            that.listCompanyDomainName()
          })
        })
    },
    addDomainName() {
      for (let i = 0, j = this.domainNameList.length; i < j; i++) {
        if (this.domainNameList[i].isAdd) {
          return
        }
      }
      const item = {
        domainName: '',
        companyId: this.companyId,
        isAdd: true
      }
      this.domainNameList.push(item)
    },
    listCompanyDomainName() {
      listCompanyDomainName({
        companyId: this.companyId
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.domainNameList = data
        }
      })
    }
  }
}
</script>


